<template>
  <XtxBread v-if="CateGory.parentId">
    <XtxBreadItem to="/">首页</XtxBreadItem>
    <XtxBreadItem  :to="`/category/${CateGory.parentId}`">
      {{CateGory.parentName}}
    </XtxBreadItem>
    <XtxBreadItem >{{CateGory.name}}</XtxBreadItem>
  </XtxBread>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { onMounted, ref } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
export default {
  name: 'SubBread',
  setup () {
    const CateGory = ref({})
    const route = useRoute()
    async function getCateGory () {
      const res = await findSubCategoryFilter(route.params.id)
      CateGory.value = res.data.result
    }
    onMounted(() => {
      getCateGory()
    })
    onBeforeRouteUpdate(() => {
      getCateGory()
    })
    return {
      CateGory
    }
  }
}
</script>
